<template>
	<view class="page-fade-in" :style="{opacity: pageOpc}">
		<template v-if="pageOpc">
			<view class="content">
				<view class="change-box flexWrapNo" :style="{top:customHeight.top+'px',height:customHeight.height+'px'}" @tap="goPage('/pages/home/storeList')">
					切换门店
					<image src="../../static/index/change-icon.png" class="change-icon"></image>
				</view>
				<view :style="{paddingTop:navHeight+'px'}"></view>
				<view class="user-info-box flexWrapNo">
					<view class="boss-img">
						<image src="/static/index/bossImg.png"></image>
					</view>
					<view class="info-box flexWarpColumn">
						<view class="sayHello">老板！{{helloText}}!</view>
						<view class="shop-name">{{userInfo.username}}</view>
					</view>
				</view>
				<!-- <view class="profit-box">
					<view class="profit-top flexWarpCenterColumn">
						<view>300</view>
						<view class="profit-text">个人股份总收益（元）</view>
					</view>
					<view class="profit-bottom flexWrap">
						<view><text>总投资</text> 30000</view>
						<view>136天</view>
						<view><text>回报率</text> 0.01%</view>
					</view>
				</view> -->
				<!-- <view class="invest-image">
					<image src="/static/index/invest.png"></image>
				</view> -->
				<view class="function-box">
					<view class="function-item flexWrap" @tap="goPage('/pages/user/userInfo')">
						<view class="item-left flexWrapNo">
							<view class="item-icon">
								<image src="/static/user/ziliao-icon.png"></image>
							</view>
							个人资料
						</view>
						<text class="icon-more"></text>
					</view>
					<view class="function-item flexWrap" @tap="goPage('/pages/index/myStore')">
						<view class="item-left flexWrapNo">
							<view class="item-icon">
								<image src="/static/user/store-icon.png"></image>
							</view>
							我的店铺
						</view>
						<view class="item-right">
							{{storeNum}}
							<text class="icon-more"></text>
						</view>
					</view>
					<!-- <view class="function-item flexWrap" @tap="makePhoneCall()">
						<view class="item-left flexWrapNo">
							<view class="item-icon">
								<image src="/static/user/kf-icon.png"></image>
							</view>
							官方客服
						</view>
						<view class="item-right">
							{{phoneNumber}}
							<text class="icon-more"></text>
						</view>
					</view> -->
					<!-- <view class="function-item flexWrap" @tap="goPage('/pages/user/aboutUs')">
						<view class="item-left flexWrapNo">
							<view class="item-icon">
								<image src="/static/user/about-icon.png"></image>
							</view>
							关于貘鱼
						</view>
						<text class="icon-more"></text>
					</view> -->
				</view>
				<view class="loginOut-btn" @tap="showTipsModel()">退出登录</view>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageOpc:0,
				customHeight:{
					height:30,
					top:20
				},
				navigationBarHeight:"",
				navHeight:"",
				iStatusBarHeight:"",
				helloText:"",
				storeNum:0,
				phoneNumber:"18884768360",
				userInfo:{}
			}
		},
		onLoad() {
			// #ifdef MP-WEIXIN
			this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			//胶囊高度
			// 获取微信胶囊的位置信息 width,height,top,right,left,bottom
			this.customHeight = wx.getMenuButtonBoundingClientRect()
			 // 导航栏高度(标题栏高度) = 胶囊高度 + (顶部距离 - 状态栏高度) * 2
			this.navigationBarHeight = this.customHeight.height + (this.customHeight.top - this.iStatusBarHeight) * 2
			// 总体高度 = 状态栏高度 + 导航栏高度
			this.navHeight = this.navigationBarHeight + this.iStatusBarHeight
			//#endif
			this.getTimeState();
			this.getUserinfo();
			this.storeNum=uni.getStorageSync('storeNum')
		},
		onReady(){
			setTimeout(() => {
				this.pageOpc=1
			}, 100)
		},
		methods: {
			// 获取个人信息
			getUserinfo(){
				this.$request.post(this.$api.userinfo, {}, {
					token:true
				}).then(res => {
					let {
						data = {}
					} = res;
					if (res.code==1) {
						this.userInfo=data.userinfo
					}
				})
			},
			// 上午下午
			getTimeState(){
			    // 获取当前时间
			    let timeNow = new Date();
			    // 获取当前小时
			    let hours = timeNow.getHours();
			    // 设置默认文字
			    // 判断当前时间段
			    if (hours >= 0 && hours <= 10) {
			        this.helloText = `早上好`;
			    } else if (hours > 10 && hours <= 14) {
			        this.helloText = `中午好`;
			    } else if (hours > 14 && hours <= 18) {
			        this.helloText = `下午好`;
			    } else if (hours > 18 && hours <= 24) {
			        this.helloText = `晚上好`;
			    }
			},
			// 拨打电话
			makePhoneCall() {
				let that = this
				uni.makePhoneCall({
					phoneNumber:that.phoneNumber
				})
			},
			// 提示是否退出
			showTipsModel() {
				let that = this
				uni.showModal({
					title: '提示',
					content: '是否确认退出登录',
					success(res) {
						if (res.confirm) {
							that.loginOut();
						}
					}
				})
			},
			loginOut() {
				this.$tools.loadIng('正在退出')
				uni.clearStorage();
				setTimeout(function() {
					uni.reLaunch({
						url: '/pages/login/login'
					})
				}, 1000)
			},
		}
	}
</script>

<style lang="scss">
	page{
		background: #fff;
	}
	.content{
		padding: 0 34upx;
	}
	.user-info-box{
		margin-top: 32upx;
		padding: 0 30upx;
		.boss-img{
			width: 200upx;
			height: 200upx;
		}
		.info-box{
			margin-left: 40upx;
			font-size: 36upx;
			font-family: PingFang SC;
			font-weight: bolder;
			line-height: 50upx;
			color: #333;
			.shop-name{
				margin-top: 20upx;
			}
		}
	}
	.profit-box{
		height: 270upx;
		background:#1D1C5C;
		border-radius: 16upx;
		.profit-top{
			font-size: 48upx;
			font-family: PingFang SC;
			font-weight: 500;
			line-height: 66upx;
			color: #6E6E6E;
			padding-top: 46upx;
			.profit-text{
				font-size: 24upx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 34upx;
				color: #FFFFFF;
			}
		}
		.profit-bottom{
			font-size: 28upx;
			font-family: PingFang SC;
			font-weight: bolder;
			line-height: 40upx;
			color: #6181D6;
			padding: 0 50upx;
			margin-top: 44upx;
			text{
				font-size: 24upx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 34upx;
				color: #6181D6;
				margin-right: 16upx;
			}
		}
	}
	.invest-image{
		height: 100upx;
		margin-top: 30upx;
	}
	.function-box{
		border-top: 3rpx solid #EAEAEA;
		margin-top: 42upx;
		.function-title{
			font-size: 32rpx;
			font-family: Source Han Sans CN;
			font-weight: 600;
			color: #111B3B;
			padding: 40rpx 36rpx;
		}
		.function-item{
			padding: 36rpx 0;
			position: relative;
			border-bottom: 3rpx solid #EAEAEA;
			.item-left{
				font-size: 28upx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 44upx;
				color: #6E6E6E;
				.item-icon{
					width: 36rpx;
					height: 36rpx;
					flex: none;
					margin-right: 17rpx;
				}
			}
			.item-right{
				font-size: 28upx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 44upx;
				color:#333333;
				.important{
					color: #FFB726;
				}
			}
			.icon-more{
				border-color:#6E6E6E;
				border-width: 4rpx;
				margin-left: 10upx;
			}
		}
	}
	.loginOut-btn{
		font-size: 28upx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 60upx;
		color:#6E6E6E;
		width: 252upx;
		height: 60upx;
		text-align: center;
		border-radius: 16upx;
		margin: 60upx auto;
	}
</style>
